<template>
  <section v-if="hasFetch">
      <template v-if="detail && detail.id > 0">
        <div style="padding:50px 50px;">
            <el-steps :active="active" align-center>
                <el-step title="买家下单" :description="detail.createdAt"></el-step>
                <el-step title="买家付款" :description="detail.paidAt"></el-step>
                <el-step title="商家发货" :description="detail.sendAt"></el-step>
                <el-step title="订单完成" :description="detail.closeTime"></el-step>
            </el-steps>
        </div>
        <el-card class="box-card" style="margin-bottom:20px;">
            <el-form
                class="form-container"
                :model="detail"
                label-width="200px">
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="订单编号：" prop="orderNo">
                            {{ detail.orderNo }}<span style="color:red;margin-left:10px;">（{{ detail.orderStatusText }}）</span>
                        </el-form-item>
                        <el-form-item label="收件人：" prop="addressName">
                            {{ detail.addressName }}
                        </el-form-item>
                        <el-form-item label="收件地址：" prop="address">
                            {{ detail.addressFull }}
                        </el-form-item>
                        <el-form-item label="联系电话：" prop="addressMobile">
                            {{ detail.addressMobile }}
                        </el-form-item>
                        <!-- <el-form-item>
                            <el-button v-if="detail.canSend==1" type="primary" size="mini" @click="send()">发货</el-button>
                        </el-form-item> -->
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <template v-if="detail&&detail.sendRecords&&detail.sendRecords.length>0">
            <el-table ref="dataTable" :data="detail.sendRecords"
                style="width: 100%;margin-bottom:20px;">
                <el-table-column align="left" label="包裹" width="500">
                    <template slot-scope="scope">
                        <div class="cell">
                            <template v-for="(item) in scope.row.items">
                                <div class="order-img-box" :key="item.id">
                                    <div class="left">
                                        <div class="title-img">
                                            <div class="img-text-box">
                                                <img :src="item.imgUrl" class="el-tooltip img item">
                                                <div>
                                                    <div class="img-text ellipsis2 f-14">{{ item.title }}</div>
                                                    <span class="btn-text" v-if="item.attribute">{{ item.attribute }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="right" style="font-size:12px;">共{{ item.quantity }}件</div>
                                </div>
                            </template>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="物流公司" prop="logisticsName">
                    <template slot-scope="scope">
                        <span>{{scope.row.logisticsName}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="快递单号" prop="logisticsKdh">
                    <template slot-scope="scope">
                        <span>{{scope.row.logisticsKdh}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="发货时间" prop="sendAt">
                    <template slot-scope="scope">
                        <span>{{scope.row.sendAt}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleLogistics(scope.row)">查看物流</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <template v-if="detail&&detail.alibabaSendRecords&&detail.alibabaSendRecords.length>0">
            <el-table ref="dataTable2" :data="detail.alibabaSendRecords"
                style="width: 100%;margin-bottom:20px;">
                <el-table-column align="left" label="商品">
                    <template slot-scope="scope">
                        <span>{{scope.row.goodName}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="数量">
                    <template slot-scope="scope">
                        <span>{{scope.row.quantity}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="物流公司" prop="logisticsCompanyName">
                    <template slot-scope="scope">
                        <span>{{scope.row.logisticsCompanyName}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="快递单号" prop="logisticsNo">
                    <template slot-scope="scope">
                        <span>{{scope.row.logisticsNo}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleLogisticsAlibaba(scope.row)">查看物流</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <el-table ref="dataTable" :data="detail.products"
                style="width: 100%">
            <el-table-column align="left" label="" width="120">
                <template slot-scope="scope">
                    <span><img :src="scope.row.imgUrl" style="width:80px;" /></span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="商品">
                <template slot-scope="scope">
                    <span>{{scope.row.title}}</span>
                </template>
            </el-table-column>
            <el-table-column align="right" label="结算单价" prop="agencyPrice">
                <template slot-scope="scope">
                    <span>￥{{scope.row.agencyPrice}}</span>
                </template>
            </el-table-column>
            <el-table-column align="right" label="批发单价" prop="price">
                <template slot-scope="scope">
                    <span>￥{{scope.row.price}}</span>
                </template>
            </el-table-column>
            <el-table-column align="right" label="数量" prop="quantity">
                <template slot-scope="scope">
                    <span>{{scope.row.quantity}}</span>
                </template>
            </el-table-column>
            <el-table-column align="right" label="结算金额" prop="agencyAmount">
                <template slot-scope="scope">
                    <span>￥{{scope.row.agencyAmount}}</span>
                </template>
            </el-table-column>
            <el-table-column align="right" label="批发金额" prop="amount">
                <template slot-scope="scope">
                    <span>￥{{scope.row.amount}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="状态">
                <template slot-scope="scope">
                    <span>{{scope.row.statusText}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="结算状态">
                <template slot-scope="scope">
                    <span>{{scope.row.settleStatusText}}</span>
                </template>
            </el-table-column>
        </el-table>
      </template>
      <div v-else>订单不存在</div>
        <el-dialog title="查看物流" :visible.sync="dialogWuliuVisible" :close-on-click-modal="false" width="800px">
            <el-table :data="logisticsQueryList"
                    style="width: 100%">
                <el-table-column align="center" label="时间" prop="ftime">
                    <template slot-scope="scope">
                        <span>{{scope.row.ftime}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="轨迹" prop="context">
                    <template slot-scope="scope">
                        <span>{{scope.row.context}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" size="mini" @click="dialogWuliuVisible=false">关闭</el-button>
            </div>
        </el-dialog>
  </section>
</template>

<script>
    import {
        order_detail,
        logistics_query,
        logistics_alibaba_query
    } from '../../api/order';
    export default {
        components: {
        },
        data() {
            return {
                dialogWuliuVisible: false,
                id: 0,
                detail: {

                },
                active: 0,
                hasFetch: false,
                logisticsQueryList: []
            }
        },
        created() {
            this.id = parseInt(this.$route.query.id);

            this.getDetail();
        },
        mounted() {
        },
        methods: {
            getDetail() {
                order_detail(this.id).then((res)=>{
                    this.detail = res.data
                    this.hasFetch = true;

                    if(this.detail && this.detail.id > 0) {
                        if(this.detail.closeTime) {
                            this.active = 4
                        } else if(this.detail.sendAt) {
                            this.active = 3
                        } else if(this.detail.paidAt) {
                            this.active = 2
                        } else {
                            this.active = 1
                        }
                        // this.active = 4;

                        console.log(this.active)
                    }
                }).catch((err)=>{

                })
            },
            send() {

            },
            handleLogistics(item) {
                logistics_query({
                    orderId: this.id,
                    phone: item.phone,
                    logisticsId: item.logisticsId,
                    logisticsKdh: item.logisticsKdh
                }).then((res)=>{
                    if(res.data.message == "ok") {
                        this.logisticsQueryList = res.data.data;
                        this.dialogWuliuVisible = true;
                    } else {
                        this.$message.error(res.data.message);

                    }
                }).catch((err)=>{

                })
            },
            handleLogisticsAlibaba(item) {
                logistics_alibaba_query({
                    orderId: this.detail.id,
                    logisticsId: item.logisticsId
                }).then((res)=>{
                    this.logisticsQueryList = res.data.data;
                    this.dialogWuliuVisible = true;
                }).catch((err)=>{

                })
            },
        }
    };
</script>
<style lang="scss" scoped>
    .cell {
        line-height: 1.5;
        padding: 0 2px;

        .order-img-box {
            margin-left: 10px;
            margin-bottom:10px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            text-align: left;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;

            .order-no {
                margin-bottom: 10px;
                font-size:14px;
            }

            .title-img {
                position: relative;
                border-radius: 4px;
                overflow-y: hidden;

                .img-text-box {
                    margin-left: 10px;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;

                    .img {
                        width: 100px;
                        height: 100px;
                        border-radius: 4px;
                        margin-right: 10px;
                    }

                    .img-text {
                        width: 240px;
                        height: 36px;
                        line-height: 18px;
                        margin-bottom: 10px;
                    }

                    .btn-text {
                        width: auto;
                        height: 18px;
                        background: rgba(51,51,51,.1);
                        font-size: 12px;
                        padding: 2px 4px;
                    }
                }
            }
        }
    }
</style>
